<script setup lang='ts'>
  import { nextTick, reactive, ref } from 'vue';
  import { guild_roomApi } from '@/api/controller';
  import { ToastSuccess, Toastloading } from '@/utils/public';
  import xmUpload from '@/components/Upload/xm-upload.vue';
  import serachUserid from '@/components/serachUserid/index.vue';
  const formLabelWidth = '120px'
  const dataForm = ref()
  const $emit = defineEmits(['updateList'])
  const action = reactive({
    dialogFormVisible:false,
    disabled:false,
    updateForm:false,
    title:'',
    formType:0, // 0新增 1修改 2对公
    formspan:12,
    roominfo:false,
    settleType:[] as Array<any>,
    aptitude:[] as Array<any>,
    rewardType:[] as Array<any>,
  })
  interface formQuert {
    user_id:number | string
    id:number | string
    uuid:number | string
    name:string
    portrait:string
    sort:number | string
    notice:string
    desc:string
    settle_type:number
    union_company:string
    union_bank_name:string
    union_bank_no:number | string
    liang:number | string
    authentication_status:number | string
    reward_type:number
  }
  let form = reactive({} as formQuert)
  const formRules = {
    user_id: [{ required: true, trigger: "blur", message: "请先选择用户" }],
    name: [{ required: true, trigger: "blur", message: "请输入公会名称" }],
    uuid: [{ required: true, trigger: "blur", message: "请输入公会uuid" }],
    settle_type: [{ required: true, trigger: "blur", message: "请选择结算类型" }],
    reward_type: [{ required: true, trigger: "blur", message: "请选择奖励类型" }],
    union_company: [{ required: true, trigger: "blur", message: "请输入结算公司" }],
    union_bank_name: [{ required: true, trigger: "blur", message: "请输入结算银行" }],
    union_bank_no: [{ required: true, trigger: "blur", message: "请输入结算银行账号" }],
    portrait: [{ required: true, trigger: "blur", message: "请上传公会头像" },],
    liang: [{ required: true, trigger: "blur", message: "请选择是否显示靓号图标" },],
    authentication_status: [{ required: true, trigger: "blur", message: "请选择公会资质认证类型" },],
  }
  const handleSubmit = ()=>{
    dataForm.value.validate(async(valid:any)=>{
      if(!valid) return
      let formobj = JSON.parse(JSON.stringify(form))
      const { settle_type, id=null, reward_type=0 } = formobj
      if(settle_type == 1) {
        delete formobj.union_company
        delete formobj.union_bank_name
        delete formobj.union_bank_no
      }
      const loading = Toastloading();
      let submitSet = false
      if(!id) {
        await guild_roomApi.createUnionInfo(formobj).then(() => {
          ToastSuccess('新增成功')
          submitSet = true
          loading.close()
        }).catch(() => {
          loading.close()
        });
      }
      if(id) {
        if(action.formType == 7) {
          await guild_roomApi.unionSetRewardType({
            union_id:id,
            reward_type
          }).then(() => {
            ToastSuccess('修改成功')
            submitSet = true
          }).catch(() => {
            loading.close()
          });
        } else {
          await guild_roomApi.setUnioniInfo(formobj).then(() => {
            ToastSuccess('修改成功')
            submitSet = true
          }).catch(() => {
            loading.close()
          });
        }
      }
      if(submitSet) {
        $emit('updateList')
        closeDialog()
        loading.close()
      }
    })
  }
  const openDialog = (query:any = {})=> {
    let formspan = 12
    const {
      un_user_id:user_id= null,
      id=null,
      uuid=null,
      name= null,
      portrait= null,
      sort=null,
      notice= null,
      desc= null,
      settle_type=null,
      union_company='',
      union_bank_name='',
      union_bank_no='',
      formType=0,
      settleType=[],
      aptitude=[],
      rewardType=[],
      liang=0,
      reward_type='',
      authentication_status=0
    } = query
    let roominfo = false
    action.settleType = settleType
    action.aptitude = aptitude
    action.rewardType = rewardType

    if(formType == 0) {
      Object.assign(form,{
        user_id,
        name,
        portrait,
        sort,
        notice,
        desc,
        settle_type,
        union_company,
        union_bank_name,
        union_bank_no,
        reward_type
      })
      action.title = '创建公会'
      roominfo = true
    }
    if(formType == 1) {
      Object.assign(form,{
        id,
        name,
        portrait,
        sort,
        notice,
        desc,
      })
      action.title = `编辑公会：${name}`
      roominfo = true
    }
    if(formType == 2) {
      formspan = 24
      Object.assign(form,{
        id,
        settle_type,
        union_company,
        union_bank_name,
        union_bank_no,
      })
      action.title = `编辑公会-对公信息：${name}`
    }
    if(formType == 3) {
      formspan = 24
      Object.assign(form,{
        id,
        uuid
      })
      action.title = `编辑公会-uuid：${name}`
    }
    if(formType == 4) {
      formspan = 24
      Object.assign(form,{
        id,
        liang
      })
      action.title = `编辑公会-靓号图标：${name}`
    }
    if(formType == 5) {
      formspan = 24
      Object.assign(form,{
        id,
        authentication_status
      })
      action.title = `编辑公会-认证类型：${name}`
    }
    if(formType == 6) {
      formspan = 24
      Object.assign(form,{
        id,
        name
      })
      action.title = `编辑公会名称：${name}`
    }
    if(formType == 7) {
      Object.assign(form,{
        id,
        reward_type
      })
      action.title = `编辑公会奖励类型：${name}`
    }
    action.formspan = formspan
    action.formType = formType
    action.roominfo = roominfo
    action.dialogFormVisible = true
  }
  const closeDialog = ()=>{
    action.dialogFormVisible = false
    nextTick(() => {
      form = reactive({} as formQuert)
    });
  }
  defineExpose({
    openDialog
  })
</script>

<template>
  <div>
    <el-dialog
    top="5vh"
    class="xm-dialog input-width"
    v-model="action.dialogFormVisible"
    :close-on-click-modal="action.disabled"
    :show-close="action.disabled"
    :close-on-press-escape="action.disabled"
    destroy-on-close
    width="60%"
    :title="action.title">
      <el-form ref="dataForm" :model="form" :rules="formRules">
        <el-form-item
          v-if="action.formType == 3"
          :label-width="formLabelWidth"
          prop="uuid"
          label="公会uuid"
        >
          <el-input v-model="form.uuid" placeholder="请输入公会uuid" />
        </el-form-item>
        <el-form-item
          v-if="action.formType == 4"
          :label-width="formLabelWidth"
          prop="liang"
          label="公会靓号"
        >
          <el-select v-model="form.liang" placeholder="请选择">
            <el-option label="显示" :value="1" />
            <el-option label="隐藏" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="action.formType == 5"
          :label-width="formLabelWidth"
          prop="authentication_status"
          label="资质认证"
        >
          <el-select v-model="form.authentication_status" placeholder="请选择">
            <el-option
              v-for="item in action.aptitude"
              :key="item.key"
              :label="item.label"
              :value="item.key" />
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="action.formType == 6"
          :label-width="formLabelWidth"
          prop="name"
          label="公会名称"
          placeholder="请输入公会名称"
        >
          <el-input v-model="form.name" />
        </el-form-item>
        <el-row>
          <template v-if="action.roominfo">
            <template v-if="action.formType == 0">
              <el-col :span="12">
                <el-form-item :label-width="formLabelWidth" label="uuid">
                  <serachUserid v-model:user_id="form.user_id" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label-width="formLabelWidth" prop="用户ID" label="user_id">
                  <el-input v-model="form.user_id" readonly />
                </el-form-item>
              </el-col>
            </template>
            <el-col :span="12">
              <el-form-item
                :label-width="formLabelWidth"
                prop="name"
                label="公会名称"
                placeholder="请输入公会名称"
              >
                <el-input v-model="form.name" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label-width="formLabelWidth" prop="sort" label="排序">
                <el-input v-model="form.sort" />
              </el-form-item>
            </el-col>
          </template>
          <el-col v-if="action.formType == 0" :span="12">
            <el-form-item :label-width="formLabelWidth" prop="settle_type" label="结算类型">
              <el-select v-model="form.settle_type" placeholder="请选择">
                <el-option
                  v-for="item in action.settleType"
                  :key="item.key"
                  :label="item.label"
                  :value="item.key" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col v-if="action.formType == 0 || action.formType == 7" :span="12">
            <el-form-item :label-width="formLabelWidth" prop="reward_type" label="奖励类型">
              <el-select v-model="form.reward_type" placeholder="请选择">
                <el-option
                  v-for="item in action.rewardType"
                  :key="item.key"
                  :label="item.label"
                  :value="item.key" />
              </el-select>
            </el-form-item>
          </el-col>
          <template v-if="form.settle_type == 2">
            <el-col :span="action.formspan">
              <el-form-item :label-width="formLabelWidth" prop="union_company" label="结算公司">
                <el-input v-model="form.union_company" />
              </el-form-item>
            </el-col>
            <el-col :span="action.formspan">
              <el-form-item :label-width="formLabelWidth" prop="union_bank_name" label="结算银行">
                <el-input v-model="form.union_bank_name" />
              </el-form-item>
            </el-col>
            <el-col :span="action.formspan">
              <el-form-item :label-width="formLabelWidth" prop="union_bank_no" label="结算银行账号">
                <el-input v-model="form.union_bank_no" />
              </el-form-item>
            </el-col>
          </template>
        </el-row>
        <template v-if="action.roominfo">
          <el-form-item :label-width="formLabelWidth" label="图片" prop="portrait">
            <xmUpload v-model:file-url="form.portrait"/>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" prop="notice" label="公告">
            <el-input
              v-model="form.notice"
              type="textarea" 
              :autosize="{ minRows: 6, maxRows: 6}" />
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" prop="desc" label="描述">
            <el-input
              v-model="form.desc"
              type="textarea" 
              :autosize="{ minRows: 6, maxRows: 6}" />
          </el-form-item>
        </template>
      </el-form>
      <template v-if="!action.disabled" #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
          <el-button type="primary" @click="handleSubmit()">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped >
  :deep(.xm-dialog) {
    .el-dialog__body {
      overflow: hidden auto;
      padding: 20px 20px;
    }
  }
</style>